<template>
  <div class="nav-bar-container">
    <!-- logo -->
    <div class="logo" :style="{'background-color':themeColor}" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'">
      <img src="@/assets/logo.png" />
      <div>{{collapse?'':appName}}</div>
    </div>
    <!-- 导航菜单 -->
    <el-menu :default-active="''+$route.meta.id" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'" :collapse="collapse">
      <template v-for="item in menus">
        <router-link :to="item.url" :key="item.id" v-if="item.children.length===0" class="menu-like">
          <el-menu-item :index="item.id.toString()">
            <i :class="item.icon" />
            <span slot="title">{{item.label}}</span>
          </el-menu-item>
        </router-link>
        <sub-menu v-else :data="item" :key="item.id" />
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import SubMenu from '@/components/SubMenu'
export default {
  components: {
    SubMenu
  },
  computed: {
    ...mapState({
      appName: state => state.app.config.sys_englishName,
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse,
      menus: state => state.app.menus
    })
  }
}
</script>

<style scoped lang="scss">
.nav-bar-container {
  .el-menu {
    position: absolute;
    top: 60px;
    bottom: 0px;
    text-align: left;
  }
  .logo {
    position: absolute;
    top: 0px;
    height: 60px;
    line-height: 60px;
    background: #545c64;
    img {
      width: 40px;
      height: 40px;
      border-radius: 0px;
      margin: 10px 10px 10px 10px;
      float: left;
    }
    div {
      font-size: 22px;
      color: white;
      text-align: left;
    }
  }
  .menu-bar-width {
    width: 200px;
  }
  .menu-bar-collapse-width {
    width: 65px;
  }
}
.menu-like {
  text-decoration: none;
}
</style>
